<template>
  <div class="border-t border-slate-200 p-4 bg-white">
    <div class="flex items-end space-x-3">
      <div class="flex-1">
        <textarea 
          v-model="newMessage"
          @keyup.enter.ctrl="$emit('send-message')"
          class="w-full p-4 border-2 border-slate-200 rounded-xl resize-none focus:outline-none focus:border-indigo-500 focus:ring-4 focus:ring-indigo-50 transition-all"
          placeholder="输入您的问题..."
          rows="1"
          :disabled="isLoading"
        ></textarea>
        <!-- 附件选项 -->
        <div class="flex items-center justify-between mt-3">
          <div class="flex items-center space-x-2">
            <button @click="$emit('upload-image')" class="attachment-btn p-2 rounded-lg hover:bg-slate-100 transition-all" data-tooltip="上传图片" title="上传图片">
              <i class="fas fa-image text-slate-600"></i>
            </button>
            <button @click="$emit('upload-file')" class="attachment-btn p-2 rounded-lg hover:bg-slate-100 transition-all" data-tooltip="上传文件" title="上传文件">
              <i class="fas fa-file text-slate-600"></i>
            </button>
            <button @click="$emit('insert-code')" class="attachment-btn p-2 rounded-lg hover:bg-slate-100 transition-all" data-tooltip="代码片段" title="代码片段">
              <i class="fas fa-code text-slate-600"></i>
            </button>
            <div class="w-px h-6 bg-slate-300 mx-2"></div>
            <button @click="$emit('start-voice')" class="attachment-btn p-2 rounded-lg hover:bg-red-100 transition-all" :class="{ 'voice-recording': isRecording }" data-tooltip="语音输入" title="语音输入">
              <i class="fas fa-microphone" :class="{ 'text-slate-600': !isRecording, 'text-white': isRecording }"></i>
            </button>
          </div>
          <div class="flex items-center space-x-2">
            <button @click="$emit('clear-conversation')" class="p-2 rounded-lg hover:bg-slate-100 transition-all" title="清空对话">
              <i class="fas fa-trash text-slate-600"></i>
            </button>
            <span class="text-xs text-slate-400">按 Enter 发送</span>
            <button 
              @click="$emit('send-message')"
              :disabled="isLoading || !newMessage.trim()"
              class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white p-3 rounded-xl hover:from-indigo-600 hover:to-purple-700 transition-all duration-200 shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed"
            >
              <i v-if="isLoading" class="fas fa-spinner fa-spin"></i>
              <i v-else class="fas fa-paper-plane"></i>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  newMessage: string
  isLoading: boolean
  isRecording: boolean
}

interface Emits {
  (e: 'update:newMessage', value: string): void
  (e: 'send-message'): void
  (e: 'upload-image'): void
  (e: 'upload-file'): void
  (e: 'insert-code'): void
  (e: 'start-voice'): void
  (e: 'clear-conversation'): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const newMessage = computed({
  get: () => props.newMessage,
  set: (value: string) => emit('update:newMessage', value)
})
</script>

<style scoped>
/* 附件按钮 */
.attachment-btn {
  transition: all 0.2s ease;
  position: relative;
}

.attachment-btn:hover {
  transform: translateY(-2px);
}

.attachment-btn::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #1f2937;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  margin-bottom: 4px;
}

.attachment-btn:hover::after {
  opacity: 1;
}

/* 麦克风录音动画效果 */
.voice-recording {
  animation: voicePulse 1.5s ease-in-out infinite;
}

@keyframes voicePulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    background-color: rgb(239, 68, 68);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
    background-color: rgb(220, 38, 38);
  }
}

.voice-recording i {
  color: white !important;
  animation: voiceIcon 1.5s ease-in-out infinite;
}

@keyframes voiceIcon {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}
</style>